<script setup lang="ts">
import { onBeforeMount, watch, ref } from "@vue/runtime-core";
import { Sunny, Moon } from '@element-plus/icons-vue'
import { handleThemeChange, local } from "@/utils"
import { ColorModel } from "@/global/const";

onBeforeMount(() => {
    const colorModel = local.get(ColorModel)
    if (colorModel === 'dark') {
        cssModelSwitch.value = false
    } else {
        cssModelSwitch.value = true
    }
})

const cssModelSwitch = ref(true)

watch(() => cssModelSwitch.value, (val, oldVal) => {
    if (val === oldVal) return
    handleThemeChange(val ? 'light' : 'dark')
})
</script>

<template>
    <div class="wrapper">
        <el-switch class="boolean-switch" v-model="cssModelSwitch" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" />
    </div>
</template>

<style scoped lang="less">
.wrapper {
    width: 40px;
    height: 30px;
    line-height: 30px;
    .boolean-switch{
        width: 100%;
        height: 100%;
    }
}
</style>